<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>案例-表单校验</title>
    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 40px;
            background-image: url(../img/bg.jpg);
        }

        .regist {
            border: 7px inset #ccc;
            width: 700px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }

        .warn {
            color: red;
            font-size: 12px;
            display: none;
        }
    </style>
    <!--
    表单校验
        1. 两次密码输入一致
        2. 邮箱格式正确
        3. 手机号格式正确
        4. 提交表单时校验表单项是否合法.
    总结:
        form表单的 onsubmit 事件 表单提交之前触发
    -->
</head>
<body>
<div class="regist_bg">
    <div class="regist">
        <form action="#" id="myForm">
            <table width="700px" height="350px">
                <tr>
                    <td colspan="3">
                        <font color="#3164af">会员注册</font> USER REGISTER
                    </td>
                </tr>
                <tr>
                    <td align="right">用户名</td>
                    <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/><span
                            id="loginnamewarn" class="warn">用户名不能为空</span></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/><span
                            id="pwdwarn" class="warn">密码不一致</span></td>
                </tr>
                <tr>
                    <td align="right">Email</td>
                    <td colspan="2"><input id="email" type="text" name="email" size="50"/> <span id="emailwarn"
                                                                                                   class="warn">邮箱格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">姓名</td>
                    <td colspan="2"><input name="text" name="username" size="50"/></td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td colspan="2">
                        <input type="radio" name="gender" value="男" checked="checked"/>男
                        <input type="radio" name="gender" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td align="right">电话号码</td>
                    <td colspan="2"><input id="phone" type="text" name="phone" size="50"/> <span id="phonewarn"
                                                                                                 class="warn">手机格式有误</span>
                    </td>
                </tr>
                <tr>
                    <td align="right">所在地</td>
                    <td colspan="3">
                        <select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
                            <option value="">----请-选-择-省----</option>
                            <option value="0">北京</option>
                            <option value="1">辽宁</option>
                            <option value="2">江苏</option>
                        </select>
                        <select id="cityId" style="width:150px">
                            <option>----请-选-择-市----</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="80" align="right">验证码</td>
                    <td width="100"><input type="text" name="verifyCode"/></td>
                    <td><img src="../img/checkMa.png"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input id="rebtn" type="submit" value="注册"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>

    // 1. 两次密码输入一致

    // 2. 邮箱格式正确

    // 3. 手机号格式正确


</script>

</body>
</html>
